<template>
  <div class="back">
    <div class="back-left">
      <div class="imgbox-left">
        <span> VbenAdmin </span>
        <img src="@/assets/imgs/login-box-bg.9027741f.svg" alt="" />
      </div>
    </div>
    <div class="back-right">
      <!-- 获取ref this.$refs -->
      <!-- v-model  绑定表单元素 -->
      <!-- v-bind   动态绑定一个或多个属性 -->
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="账号" prop="username">
          <el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <!-- v-on 绑定事件 -->
          <el-button type="primary" @click="submitForm" style="width: 100%">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { setCookie } from '@/utils/cookie';
export default {
  data() {
    return {
      ruleForm: {},
      rules: {
        username: [{ required: true, trigger: 'blur', message: '请输入账号' }],
        password: [{ required: true, trigger: 'blur', message: '请输入密码' }],
      },
    };
  },

  methods: {
    submitForm() {
      // validate 触发表单验证
      // valid：true
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          // 此处为提示框
          this.$notify({
            title: '成功',
            message: '欢迎' + this.ruleForm.username,
            type: 'success',
          });
          // 将账号存入cookie中 时间为十分钟
          // （cookie中的名字  传入的名字  时间）
          setCookie('username', this.ruleForm.username, 600);
          // this.$router.push('/');
          // 刷新页面
          location.reload();
        } else {
          this.$notify({
            title: '提示',
            message: '登陆失败',
            type: 'error',
          });
          return false;
        }
      });
    },
  },
};
</script>

<style>
.back {
  display: flex;
}
.back-left {
  min-height: 100%;
  overflow: hidden;
}
.back-left:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-left: -48%;
  background-image: url(@/assets/imgs/login-bg.b9f5c736.svg);
  background-position: 100%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  content: '';
}
.imgbox-left {
  position: relative;
  width: 320px;
  height: 220px;
  z-index: 2;
  margin-top: 220px;
  margin-left: 100px;
}
.imgbox-left img {
  width: 100%;
  height: 100%;
}
.imgbox-left span {
  display: inline-block;
  text-align: center;
  width: 100%;
  top: -40px;
  color: aliceblue;
  font-size: 30px;
  position: absolute;
}
.back-right {
  margin: auto;
  padding-top: 200px;
  box-sizing: border-box;
}
</style>
